<template>
  <div class="dashboard-container" v-if="roleName == '管理员'">
    <h1>员工信息管理界面</h1>
    <div>
      <el-button type="primary" @click="addUserButton"
                 style="margin-left: 30%"
      >新增员工
      </el-button>
      <el-input v-model="userId2" placeholder="用户ID" style="width: 200px;margin-left: 40px" clearable/>
      <el-input v-model="userName2" placeholder="用户名" style="width: 200px;margin-left: 40px" clearable/>
      <el-select v-model="roleName2" placeholder="用户名" style="width: 200px;margin-left: 40px" clearable>
        <el-option v-for="role in roleList" :label="role.name" :value="role.name" :key="role.id"/>
      </el-select>

      <el-button type="primary" @click="selectUser" :loading="selectButtonLoading"
                 style="margin-left: 40px"
      >查询
      </el-button>
      <el-button style="margin-left: 40px" @click="checkSelect">重置</el-button>

      <el-table :data="userList" height="659px" border style="width: 100%;margin-top: 40px">
        <el-table-column align="center" fixed prop="userId" label="用户ID" sortable/>
        <el-table-column align="center" fixed prop="userName" label="用户名" sortable/>
        <el-table-column align="center" fixed prop="userPassword" label="用户密码" sortable/>
        <el-table-column align="center" fixed prop="roleName" label="角色" sortable/>
        <el-table-column align="center" fixed prop="sex" label="性别" sortable/>
        <el-table-column align="center" fixed prop="identificationCard" label="身份证号" sortable/>
        <el-table-column align="center" fixed prop="phoneNumber" label="电话号码" sortable/>
        <el-table-column align="center" fixed prop="remark" label="备注" sortable/>
        <el-table-column align="center" fixed  label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="updateUserButton(scope.row)" size="small"
            >修改</el-button>
            <el-button type="text" @click="deleteButton(scope.row)" size="small" v-if="scope.row.roleId != 1"
            >删除</el-button>
            <el-button type="text" disabled size="small" v-else
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div>
      <el-dialog title="新增" style="margin-top: 50px" width="40%" :visible.sync="addUserButtonController"
                 @close="closeDialog('ruleForm')"
      >
        <div>
          <el-form :rules="userRoles" :model="addUserData" ref="ruleForm" label-width="20%">

            <el-form-item label="用户名" prop="userName">
              <el-input v-model="addUserData.userName" maxlength="20" show-word-limit style="width: 80%" clearable
                        placeholder="请输入用户名称"
              />
            </el-form-item>

            <el-form-item label="密码" prop="userPassword">
              <el-input v-model="addUserData.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable
                        placeholder="请输入密码"
              />
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="addUserData.sex">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="手机号" prop="phoneNumber">
              <el-input v-model="addUserData.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable
                        placeholder="请输入手机号"
              />
            </el-form-item>

            <el-form-item label="身份证号" prop="identificationCard">
              <el-input v-model="addUserData.identificationCard" maxlength="18" show-word-limit style="width: 80%"
                        clearable placeholder="请输入身份证号"
              />
            </el-form-item>

            <el-form-item label="备注" prop="remark">
              <el-input v-model="addUserData.remark" maxlength="20" show-word-limit style="width: 80%" clearable
                        placeholder="请输入备注"
              />
            </el-form-item>

          </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser('ruleForm')">确定</el-button>
        <el-button @click="closeDialog('ruleForm')">取消</el-button>
        </span>

      </el-dialog>
    </div>
    <div>
      <el-dialog title="修改" style="margin-top: 50px" width="40%" :visible.sync="updateUserButtonController" @close="closeDialog('ruleForm')">
        <div>
          <el-form :rules="userRoles" :model="updateUserData" ref="ruleForm" label-width="20%">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="updateUserData.userName" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户名称"/>
            </el-form-item>
            <el-form-item label="密码" prop="userPassword">
              <el-input v-model="updateUserData.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="updateUserData.sex"><el-radio label="男">男</el-radio><el-radio label="女">女</el-radio></el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input v-model="updateUserData.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入手机号"/>
            </el-form-item>
            <el-form-item label="身份证号" prop="identificationCard">
              <el-input v-model="updateUserData.identificationCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="updateUserData.remark" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUser('ruleForm')">确定</el-button><el-button @click="closeDialog('ruleForm')">取消</el-button>
        </span>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="删除" style="margin-top: 50px" width="40%" :visible.sync="deleteController" >
        <div>
          <h2>请确认是否删除该用户信息！</h2>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteUser()">确定</el-button>
          <el-button @click="deleteController = false">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
  <div class="dashboard-container" v-else>
    <h1>无权访问</h1>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deleteUser, insertUser, selectAllUser, updateUser } from '@/api/user'

export default {
  name: 'Users',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 页面参数
  data() {
    return {
      userId1: this.$store.getters.userId,
      userName1: this.$store.getters.userName,
      roleName1: this.$store.getters.roleName,
      userId2: '',
      userName2: '',
      roleName2: '',
      roleList: [
        { id: 1, name: '管理员' },
        { id: 2, name: '员工' }
      ],
      userList: [],
      selectButtonLoading: false,
      addUserButtonController: false,
      addUserData: {
        identificationCard: '',
        phoneNumber: '',
        remark: '',
        sex: '',
        userPassword: '',
        userName: ''
      },
      userRoles: {
        userName: [
          { required: true, trigger: 'blur', message: '用户名不能为空' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, trigger: 'blur', message: '性别不能为空' }
        ],
        phoneNumber: [
          { required: true, trigger: 'blur', message: '手机号不能为空' },
          { min: 11, max: 11, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        identificationCard: [
          { required: true, trigger: 'blur', message: '身份证号不能为空' },
          { min: 18, max: 18, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      },
      updateUserButtonController: false,
      updateUserData: {
        userTableId: '',
        userId: '',
        roleId: '',
        identificationCard: '',
        phoneNumber: '',
        remark: '',
        sex: '',
        userPassword: '',
        userName: '',
      },
      deleteController: false,
      deleteUserId: ''
    }
  },
  // 页面初始化方法
  mounted() {
    this.selectUser()
  }
  ,
  // 页面事件、方法
  methods: {
    selectUser() {
      this.selectButtonLoading = true
      selectAllUser({
        userId: this.userId2,
        userName: this.userName2,
        roleName: this.roleName2
      }).then(
        response => {
          this.userList = response.data
          this.selectButtonLoading = false
        }
      )
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields()
      this.addUserButtonController = false
      this.updateUserButtonController = false
    },
    addUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('插入：')
          console.log(this.addUserData)
          insertUser({
            userName: this.addUserData.userName,
            userPassword: this.addUserData.userPassword,
            sex: this.addUserData.sex,
            phoneNumber: this.addUserData.phoneNumber,
            identificationCard: this.addUserData.identificationCard,
            remark: this.addUserData.remark
          }).then(response => {
              this.addUserButtonController = false
              this.selectUser()})} else {return false}})
    },
    checkSelect() {
      this.userId2 = ''
      this.userName2 = ''
      this.roleName2 = ''
      this.selectUser()
    },
    addUserButton() {
      this.addUserData = {
        identificationCard: '',
        phoneNumber: '',
        remark: '',
        sex: '',
        userPassword: '',
        userName: ''
      }
      this.addUserButtonController = true
    },
    updateUserButton(row){
      this.updateUserData = {
        userTableId: row.userTableId,
        userId: row.userId,
        roleId: row.roleId,
        identificationCard: row.identificationCard,
        phoneNumber: row.phoneNumber,
        remark: row.remark,
        sex: row.sex,
        userPassword: row.userPassword,
        userName: row.userName
      }
      this.updateUserButtonController = true
    },
    updateUser(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('修改：')
          console.log(this.updateUserData)
          updateUser({
            userTableId: this.updateUserData.userTableId,
            userId: this.updateUserData.userId,
            roleId: this.updateUserData.roleId,
            userName: this.updateUserData.userName,
            userPassword: this.updateUserData.userPassword,
            sex: this.updateUserData.sex,
            phoneNumber: this.updateUserData.phoneNumber,
            identificationCard: this.updateUserData.identificationCard,
            remark: this.updateUserData.remark }).then(response => {
              this.updateUserButtonController = false
              this.selectUser()})} else {return false}})
    },
    deleteButton(row){
      this.deleteUserId = row.userId
      this.deleteController = true
    },
    deleteUser(){
      deleteUser({userId: this.deleteUserId}).then(
        response => {
          this.deleteController = false
          this.selectUser()
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
